<template>
  <div :class="['question-type', 'sc-display', state.height]">
    <span :class="[state.size, state.weight, state.spacing, state.color]">{{
      state.text
    }}</span>
  </div>
</template>

<script setup>
import { defineProps, reactive } from "vue";

const props = defineProps({
  msg: Object,
});

const state = reactive({
  height: props.msg.hasOwnProperty("height") ? props.msg.height : "h50p",
  size: props.msg.size ? props.msg.size : "fs22",
  weight: props.msg.weight ? props.msg.weight : "fw200",
  spacing: props.msg.spacing ? props.msg.spacing : "ls4",
  color: props.msg.color ? props.msg.color : "white",
  text: props.msg.text ? props.msg.text : "默认类型文字",
});
</script>
